<template>
  <div>
    <div>
      <van-search
          :value="goods.name"
          placeholder="请输入搜索关键词"
          show-action
          @:search="Search()"

      />

    </div>
<br>
<div>
  <van-grid :gutter="10" column-num="5">
    <van-grid-item >
      <van-image>
        <van-image
            width="50"
            height="50"
            src="https://img.yzcdn.cn/vant/cat.jpeg" />
      </van-image>
      <label>蔬菜</label>
    </van-grid-item>
    <van-grid-item >
      <van-image>
        <van-image
            width="50"
            height="50"
            src="" />
      </van-image>
      <label>肉类</label>
    </van-grid-item>
    <van-grid-item >
      <van-image>
        <van-image
            width="50"
            height="50"
            src="https://ts4.cn.mm.bing.net/th?id=OIP-C.zjCXRBwCShFFZXOWyRCp5wHaE7&w=306&h=203&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2" />
      </van-image>
      <label>海鲜</label>
    </van-grid-item>
    <van-grid-item >
      <van-image>
        <van-image
            width="50"
            height="50"
            src="https://ts2.cn.mm.bing.net/th?id=OIP-C.A75P7TorESSKmfb1DYOcKgHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2" />
      </van-image>
      <label>水果</label>
    </van-grid-item>
    <van-grid-item >
      <van-image>
        <van-image
            width="50"
            height="50"
            src="https://ts1.cn.mm.bing.net/th?id=OIP-C.xAbyW9QeSuNHEzxGJOsejAHaEl&w=317&h=196&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2" />
      </van-image>
      <label>牛奶</label>
    </van-grid-item>




  </van-grid>
</div>

  <div>
    <van-row>
      <van-col span="8">
        <van-sidebar active-key="{{ activeKey }}">
        <van-sidebar-item title="推荐" />
        <van-sidebar-item title="选着困难症" />
        <van-sidebar-item title="天天平价" />
        <van-sidebar-item title="叶菜" />
        <van-sidebar-item title="番茄" />
        <van-sidebar-item title="红薯" />
        <van-sidebar-item title="豆腐" />
        <van-sidebar-item title="菌菇" />
        <van-sidebar-item title="有机蔬菜" />
        <van-sidebar-item title="四川泡椒" />
        <van-sidebar-item title="进口豆腐" />
        <van-sidebar-item title="崇明蔬菜" />
      </van-sidebar>
      </van-col>

      <van-col span="16">
        <van-image class="lb2"
                   width="200"
                   height="100"
                   src="https://ts3.cn.mm.bing.net/th?id=OIP-C.41orwrhUbt3EusLHYyzi-wHaE7&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2" />

       <div style="margin-top: 20px" v-for="(g,index) in goods">
         <van-card
            :num="g.gnums"
            :price="g.gprice"
            :desc="g.gdescription"
            :title="g.gname"
            :thumb="g.gimg"
        />

         <view  class="lb3" slot="footer">
           <van-icon name="shopping-cart-o" @click="addGoods(index)"/>
         </view>
        </div>
      </van-col>

    </van-row>
  </div>
  </div>
</template>

<script>
export default {
  name: "SortView",

  data(){
    return{
        name:"",
        goods:[
            {
              gdescription:"",
              gname:"",
              gprice:"",
              gnums:"",
              gimg:"",
        }
        ]
    }
  },
  mounted() {//请求就加载
   this.axios.get("/classify/all.do").then(r=>{
     if (r.data.code==200){
       this.goods=r.data.data;
     }
   })
  },
  methods:{
    addGoods(index){//添加商品到购物车
      console.log(this.goods)
      this.axios.post("/shopCar/add.do",this.goods[index]).then(r=>{
        if(r.data.code==200){
          this.$toast("添加成功")
        }
      })
    }
  }
}
</script>

<style scoped>

.lb2{
  margin-top: 20px;

}
.lb3{
  float: right;
}

</style>